<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Transport - A Free Website Template</title>
    <link rel="icon" type="image/png" th:href="@{images/favicon.png}">
    <link rel="stylesheet" th:href="@{css/fonts.css}">
    <link rel="stylesheet" th:href="@{css/simple-lightbox.css}">
    <link rel="stylesheet" th:href="@{css/all.css}">
    <link rel="stylesheet" th:href="@{css/style.css}">
    <link rel="stylesheet" th:href="@{css/style-global.css}">
    <link rel="stylesheet" th:href="@{css/style-responsive.css}">
    <script th:src="@{js/jquery.js}"></script>
    <script th:src="@{form/form.js}"></script>
</head>

<body id="home">

<header>
    <div class="container df_c_v jcsb">
        <a href="#home" class="logo">
            <img th:src="@{images/logo.png}" alt=""/>
        </a>
        <div class="menucontrols">
            <a href="" class="showmenu df_c_hv">
                <span class="fa-solid fa-bars"></span>
            </a>
        </div>
        <nav>
            <a href="" class="hidemenu df_c_hv">
                <span class="fa-solid fa-times"></span>
            </a>
            <ul>
                <li class="active"><a href="#home">Home</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </div>
</header>
<!-- HEADER -->

<section class="banner flf bfr">
    <div class="container">
        <div class="text">
            <h1>Moving Your Goods Safely</h1>
            <h3>Using Airlines, Trains, Trucks, and Ships.</h3>
            <br clear="all"/>
            <a href="#" class="btn">
                Learn more <span class="fa-solid fa-angle-right"></span>
            </a>
        </div>
    </div>
</section>
<!-- BANNER -->


<section class="brands flf">
    <div class="container df_c_v jcsb">
        <img th:src="@{images/brands/acquaint.png}" alt="">
        <img th:src="@{images/brands/bloomy.png}" alt="">
        <img th:src="@{images/brands/class.png}" alt="">
        <img th:src="@{images/brands/mazeflow.png}" alt="">
        <img th:src="@{images/brands/vincimo.png}" alt="">
        <img th:src="@{images/brands/zapwiz.png}" alt="">
    </div>
</section>
<!-- BRANDS -->

<section class="services flf" id="services">
    <div class="container">
        <h2>Transport Services</h2>
        <h4>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer consequat placerat ultrices. Integer
            volutpat nulla eu odio lacinia hendrerit.
        </h4>

        <div class="servicesitemswrap gallery">
            <div class="item">
                <div class="itemcontent">
                    <div class="thumb">
                        <img th:src="@{images/service1.jpg}" alt="">
                    </div>
                    <h3>Goods Delivery Using Vans</h3>
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    </p>
                </div>
            </div>


            <div class="item">
                <div class="itemcontent">
                    <div class="thumb">
                        <img th:src="@{images/service2.jpg}" alt="">
                    </div>
                    <h3>Truck Transportation</h3>
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    </p>
                </div>
            </div>


            <div class="item">
                <div class="itemcontent">
                    <div class="thumb">
                        <img th:src="@{images/service3.jpg}" alt="">
                    </div>
                    <h3>Water Transportation (Ships)</h3>
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    </p>
                </div>
            </div>


            <div class="item">
                <div class="itemcontent">
                    <div class="thumb">
                        <img th:src="@{images/service4.jpg}" alt="">
                    </div>
                    <h3>Air Transportation</h3>
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    </p>
                </div>
            </div>


            <div class="item">
                <div class="itemcontent">
                    <div class="thumb">
                        <img th:src="@{images/service5.jpg}" alt="">
                    </div>
                    <h3>Train Transportation</h3>
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    </p>
                </div>
            </div>


        </div>

    </div>
</section>
<!-- SERVICES -->


<section class="about flf" id="about">
    <div class="container df_c_v jcsb">
        <div class="text">
            <h2>About Us</h2>
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
                scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
                into electronic typesetting, remaining essentially unchanged.
            </p>

            <div class="video">
                <video controls>
                    <source th:src="@{images/transportvideo.mp4}" type="video/mp4">
                </video>
            </div>


            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
                scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
                into electronic typesetting, remaining essentially unchanged.
            </p>
        </div>
    </div>
</section>
<!-- ABOUT US -->


<section class="contact flf" id="contact">
    <div class="container">

        <h2>Let's Talk</h2>
        <h5>Use Below Form or Email me direct: <a href="mailto:#">contact@yourwebsite.com</a></h5>

        <form class="flf df_c_v jcsb" id="contactform" method="post" th:action="@{form/form.php}">
            <input type="text" name="name" placeholder="Name*" required>
            <input type="email" name="email" placeholder="Email*" required>
            <input type="text" name="subject" placeholder="Subject*" required>
            <textarea name="message" placeholder="Message..."></textarea>
            <button id="submit" type="submit" name="submit">
                Submit Message &nbsp; <span class="fa-solid fa-angle-right"></span>
            </button>
        </form>
    </div>
</section>
<!-- CONTACT -->

<div class="map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d317716.60643946525!2d-0.43124275861149985!3d51.528607014955114!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon%2C%20UK!5e0!3m2!1sen!2sus!4v1684065552223!5m2!1sen!2sus"
            style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<!-- MAP -->

<footer class="flf">
    <div class="container">

        <div class="copyright">
            Copyright &copy; <span id="footeryear"></span> <a href="#">Transport</a>
        </div>
        <div class="social df_c_v">
            Follow
            <a href="#"><span class="fa-brands fa-facebook"></span></a>
            <a href="#"><span class="fa-brands fa-twitter"></span></a>
            <a href="#"><span class="fa-brands fa-instagram"></span></a>
        </div>

    </div>
</footer>
<!-- FOOTER -->


<script>
    let getshowmenu = document.getElementsByClassName('showmenu')[0];
    let gethidemenu = document.getElementsByClassName('hidemenu')[0];
    let getnav = document.getElementsByTagName('nav')[0];
    getshowmenu.addEventListener('click', function () {
        getnav.classList.add('active');
        getnav.style.opacity = '1';
        gethidemenu.style.opacity = '1';
        gethidemenu.style.visibility = 'visible';
    });
    gethidemenu.addEventListener('click', function () {
        getnav.classList.remove('active');
        getnav.style.opacity = '0';
        gethidemenu.style.opacity = '0';
        gethidemenu.style.visibility = 'hidden';
    });

    function scollevent() {
        var getheaderelement = document.getElementsByTagName('header')[0].classList;
        if (document.documentElement.scrollTop > 100) {
            getheaderelement.add('fixed');
        } else {
            getheaderelement.remove('fixed');
        }
    }

    window.onscroll = scollevent;
    document.getElementById('footeryear').textContent = new Date().getFullYear();
</script>
<script>
    jQuery(document).ready(function ($) {
        var lightbox = $('.gallery a').simpleLightbox({history: false});
        inPageItems = [];
        $('nav ul li a').each(function (i, item) {
            var elem = $(this);
            item = {
                refElement: $(elem.attr('href')),
                parent: elem.parent()
            }
            inPageItems.push(item);
        });
        $('nav ul li a, a.logo').click(function (event) {
            event.preventDefault();
            var target = $(this).attr('href');
            $('html,body').animate({scrollTop: ($(target).offset().top - 50)}, 'slow');
            var getwindowwidth = $(window).width();
            if (getwindowwidth < 1200) {
                $('nav').removeClass('active');
                $('nav').css('opacity', '0');
                $('a.hidemenu').css('visibility', 'hidden');
                $('a.hidemenu').css('opacity', '0');
            }
        });
        $(window).scroll(function () {
            var top = $(document).scrollTop();
            $.each(inPageItems, function (i, item) {
                if (top > item.refElement.offset().top - 52) {
                    if (!item.parent.hasClass('active')) {
                        $('nav ul li').removeClass('active');
                        item.parent.addClass('active');
                    }
                } else {
                    item.parent.removeClass('active');
                }
            });
        });
    });
</script>
<script th:src="@{js/simple-lightbox.jquery.js}"></script>
</body>
</html>
<!-- Template By: LayoutFlow, URL: https://layoutflow.com/  -->